<template>
  <el-drawer
    v-model="visible"
    :title="title"
    size="900px"
    :close-on-click-modal="false"
    :before-close="close"
  >
    <el-form
      ref="formRef"
      :model="form"
      :validate-on-rule-change="false"
      :rules="rules"
      label-width="80px"
      class="order-form"
    >
      <div class="order-form" ref="drawerBodyRef" style="height: 100%; overflow-y: auto">
        <div class="section-title">
          <span class="label">客户信息</span>
          <span class="label collapse-btn">
            <el-button text size="small" @click="toggleCollapse">
              <el-icon>
                <component :is="isCollapsed ? ArrowUp : ArrowDown" />
              </el-icon>
              <span> {{ isCollapsed ? '收起' : '展开' }}</span>
            </el-button>
          </span>
          <template v-if="!isCollapsed">
            <CollapsedCustom :form="form" />
          </template>

          <template v-else>
            <!-- <el-form-item label="" label-width="0" prop="recognizeText">
              <div class="recognize-row">
                <el-input
                  class="ocr-input"
                  v-model="form.recognizeText"
                  type="textarea"
                  placeholder="粘贴收件人信息（如：张三 13888888888 北京市朝阳区...）"
                  rows="3"
                />
                <el-button class="ocr-btn" type="primary" @click="handleRecognize">识别</el-button>
              </div>
            </el-form-item> -->
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="客户姓名" prop="receiverName">
                  <el-input v-model="form.receiverName" placeholder="请选择或输入">
                    <template #suffix>
                      <el-button type="primary" link @click="selectCustomerRef?.show()">
                        选择客户
                      </el-button>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="客户电话" prop="receiverPhone">
                  <el-input v-model="form.receiverPhone" placeholder="请选择或输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-col :span="24">
              <el-form-item label="收货地址" prop="receiverAddress">
                <el-input
                  type="textarea"
                  placeholder="请选择或输入"
                  v-model="form.receiverAddress"
                />
              </el-form-item>
            </el-col>
          </template>
        </div>

        <!-- 动态包裹 -->
        <div
          v-for="(pkg, index) in form.packages"
          :class="index && 'mt-15'"
          :key="pkg.id"
          :id="`package-${pkg.id}`"
        >
          <el-card shadow="never">
            <template #header>
              <div class="package-header">
                <span class="package-title">📦 包裹 {{ index + 1 }} </span>
                <div class="actions">
                  <span class="product-title">
                    <el-text v-if="packageData[index]" type="success" size="mini"
                      >套餐名称: {{ packageData[index].productName }}
                    </el-text>
                  </span>

                  <el-space>
                    <el-button
                      v-if="pkg.expanded"
                      :icon="Link"
                      size="small"
                      text
                      type="primary"
                      @click="selectPackage(index)"
                      >从套餐选择</el-button
                    >
                    <span class="ml-1">
                      <!-- 是否是固定套餐 用etag展示 1 是 0 否 -->
                      <el-tag
                        v-if="pkg.isFixed"
                        closable
                        @close="fixedClose(index)"
                        type="success"
                        effect="dark"
                        size="small"
                        >固定套餐</el-tag
                      >
                      <el-tag v-else type="warning" effect="dark" size="small">普通</el-tag>
                    </span>

                    <el-button text size="small" @click="pkg.expanded = !pkg.expanded">
                      <el-icon>
                        <component :is="pkg.expanded ? ArrowUp : ArrowDown" />
                      </el-icon>
                      <span> {{ pkg.expanded ? '收起' : '展开' }}</span>
                    </el-button>
                    <el-button text size="small" type="danger" @click="removePackage(index)">
                      <el-icon>
                        <Delete />
                      </el-icon>
                      删除
                    </el-button>
                  </el-space>
                </div>
              </div>
            </template>
            <el-collapse-transition>
              <div v-show="pkg.expanded">
                <el-table
                  style="margin-top: 10px"
                  :data="pkg.productCollection"
                  :border="true"
                  size="small"
                >
                  <el-table-column label="产品名称" prop="productName" />
                  <el-table-column
                    label="产品类型"
                    prop="usageType"
                    width="110"
                    :formatter="getGoodsTypeByUsageType"
                  >
                  </el-table-column>
                  <el-table-column label="赠品" prop="isGift" width="60">
                    <template #default="{ row }">
                      <span>{{ row.isGift === 1 ? '是' : '否' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="件数" width="150">
                    <template #default="{ row }">
                      <el-input-number
                        v-if="!pkg.isFixed"
                        v-model="row.num"
                        style="width: 100%"
                        controls-position="right"
                        :min="0"
                      />
                      <span v-else>{{ row.num }}</span>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column label="成本价" width="80" prop="costPrice" /> -->
                  <el-table-column label="销售价" width="150" prop="productPrice">
                    <template #default="{ row }">
                      <el-input-number
                        v-if="!pkg.isFixed"
                        v-model="row.productPrice"
                        style="width: 100%"
                        controls-position="right"
                        :min="0"
                      />
                      <span v-else>{{ row.productPrice }}</span>
                    </template>
                  </el-table-column>
                </el-table>

                <div class="total-bar">
                  <span
                    >合计：<b>{{ calcPkgQty(pkg) }}</b> 件 &nbsp;

                    <template v-if="!packageData[index]">
                      <b class="amount">{{ calcPkgAmount(pkg) }}</b>
                    </template>
                    <!-- 套餐价 -->
                    <template v-else>
                      <b class="amount oldSalePrice">原价：{{ calcPkgAmount(pkg) }}</b>
                      <b class="salePrice">优惠价：{{ packageData[index].salePrice }}</b>
                    </template>

                    元</span
                  >
                </div>
              </div>
            </el-collapse-transition>
            <div v-if="!pkg.expanded" class="pkg-preview">
              <span>
                {{ getProduct(pkg.productCollection) }}
              </span>
            </div>
          </el-card>
        </div>
        <!-- 添加包裹按钮 -->
        <div class="add-package-btn" @click="addPackage">
          <el-icon>
            <Plus />
          </el-icon>
          <span>添加新的包裹</span>
        </div>

        <!-- 物流信息 -->
        <div class="section-title">
          <span class="label">物流信息</span>
          <el-row :gutter="20">
            <el-col :span="16">
              <el-form-item label="付款方式" prop="paymentMethod">
                <el-radio-group v-model="form.paymentMethod" placeholder="请选择付款方式">
                  <el-radio v-for="pay in payType" :key="pay.value" :value="pay.value">{{
                    pay.label
                  }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="延期发货" prop="isDelayedDelivery">
                <el-radio-group v-model="form.isDelayedDelivery">
                  <el-radio :value="0">否</el-radio>
                  <el-radio :value="1">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <!-- logisticsTypeOptions  -->
            <el-col :span="form.shippingType === '1' ? 12 : 24">
              <el-form-item label="物流类型" prop="shippingType">
                <el-radio-group v-model="form.shippingType">
                  <el-radio
                    v-for="item in logisticsTypeOptions"
                    :label="item.value"
                    :key="item.value"
                  >
                    {{ item.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <!-- logisticsTypeOptions  -->
            <!-- 如果物流公司是系统发货 -->
            <template v-if="form.shippingType === '1'">
              <el-col :span="12">
                <el-form-item label="物流公司" prop="logisticsPlatformCode">
                  <el-select
                    v-model="form.logisticsPlatformCode"
                    placeholder="请选择物流公司"
                    :options="logisticsCompany"
                  />
                </el-form-item>
              </el-col>
            </template>
            <!-- 自主发货 -->
            <template v-else>
              <el-col :span="12">
                <el-form-item label="物流公司" prop="logisticsPlatformCode">
                  <el-select
                    v-model="form.logisticsPlatformCode"
                    placeholder="请选择物流公司"
                    :options="sysSelfFulfillmentOgistics"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="物流单号" prop="logisticsNo">
                  <el-input
                    maxlength="20"
                    show-word-limit
                    v-model="form.logisticsNo"
                    placeholder="请填写快递单号"
                  />
                </el-form-item>
              </el-col>
            </template>

            <el-col :span="12">
              <el-form-item label="订单时间" prop="orderTime">
                <el-date-picker
                  v-model="form.orderTime"
                  disabled
                  type="datetime"
                  style="width: 100%"
                  value-format="YYYY-MM-DD HH:mm:ss"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="订单来源" prop="channelType">
                <el-select v-model="form.channelType" placeholder="请选择">
                  <el-option
                    v-for="item in orderFrom"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="已付金额" prop="actualPrice">
                <el-input-number
                  v-model="form.actualPrice"
                  controls-position="right"
                  style="width: 100%"
                  :min="0"
                  @change="actualPriceChange"
                >
                  <template #suffix> <span>RMB</span> </template>
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="代收金额" prop="codAmount">
                <el-input-number
                  v-model="form.codAmount"
                  controls-position="right"
                  style="width: 100%"
                  @change="codAmountChange"
                  :min="0"
                >
                  <template #suffix> <span>RMB</span> </template>
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="总金额" prop="totalAmount">
                <el-input-number
                  v-model="form.totalAmount"
                  controls-position="right"
                  style="width: 100%"
                  disabled
                  :min="0"
                >
                  <template #suffix> <span>RMB</span> </template>
                </el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="上传附件" prop="productImage">
                <ImageUpload
                  class="upload-box"
                  v-model="form.fileAttachment"
                  action="/common/upload"
                  :limit="1"
                  :file-type="['png', 'jpg', 'jpeg']"
                  :is-show-tip="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否大单" prop="isBigOrder">
                <el-radio-group v-model="form.isBigOrder">
                  <el-radio :value="0">否</el-radio>
                  <el-radio :value="1">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 备注 -->
          <el-form-item label="订单备注" prop="orderRemark">
            <el-input
              v-model="form.orderRemark"
              type="textarea"
              rows="3"
              placeholder="如果订单需要分批间隔发出，请在此处填写详细备注！"
            />
          </el-form-item>
        </div>
      </div>
    </el-form>

    <template #footer>
      <el-button @click="close" :disabled="loadings">取消</el-button>
      <el-button type="primary" :loading="loadings" @click="submit">提交订单</el-button>
    </template>
  </el-drawer>
  <!-- 客户选择弹窗 -->
  <SelectCustomer ref="selectCustomerRef" @select="selectCustomer" />
  <!-- 二次确认弹窗 -->
  <ConfirmMultiPackageDialog
    ref="confirmMultiPackageDialogRef"
    :payType="payType"
    :orderFrom="orderFrom"
    @confirm="handleConfirmSubmit"
  />
  <!-- 商品选择弹窗 -->
  <SelectGoodsPackage ref="selectGoodsPackageRef" @ok="selectGoodsPackage" />
</template>
<script setup lang="ts">
import { ref, reactive, watch, computed, toRaw } from 'vue';
import { ArrowUp, ArrowDown, Delete, Plus, Link } from '@element-plus/icons-vue';
import { dayjs, ElMessage, ElLoading } from 'element-plus';
import { cloneDeep, head } from 'lodash';
import { addRepeatPurchaseOrders } from '../../api/platformOrders/orders/repeatPurchaseOrder';

const visible = ref(false);
const selectGoodsPackageRef = ref();
const confirmMultiPackageDialogRef = ref();
const drawerBodyRef = ref();
const selectCustomerRef = ref<any>();
const formRef = ref<any>();

// props
interface Option {
  value?: any;
  label?: string;
  [key: string]: any;
}
const props = withDefaults(
  defineProps<{
    logisticsCompany?: Option[];
    payType?: Option[];
    goodsTypes?: Option[];
    goodsList?: Option[];
    orderFrom?: Option[];
    logisticsTypeOptions?: Option[];
    sysSelfFulfillmentOgistics?: Option[];
  }>(),
  {
    // 物流公司
    logisticsCompany: () => [],
    // 支付方式
    payType: () => [],
    // 商品类型
    goodsTypes: () => [],
    // 基础商品列表
    goodsList: () => [],
    // 订单来源
    orderFrom: () => [],
    // 物流类型
    logisticsTypeOptions: () => [],
    // 自提物流
    sysSelfFulfillmentOgistics: () => []
  }
);

const actualPriceRules = (rule: any, value: any, callback: any) => {
  // 验证条件： 已付金额 + 货到付款金额 = 总金额
  if (form.actualPrice + form.codAmount != form.totalAmount) {
    callback(new Error('付款金额合计与订单总金额不符'));
  } else {
    callback();
  }
};

// 校验规则
const getFormRules = (shippingType: string) => {
  const rules: any = {
    receiverName: [{ required: true, message: '请输入客户名称', trigger: 'change' }],
    receiverPhone: [{ required: true, message: '请输入客户手机号', trigger: 'change' }],
    receiverAddress: [{ required: true, message: '请输入客户地址', trigger: 'change' }],
    paymentMethod: [{ required: true, message: '请选择支付方式', trigger: 'change' }],
    channelType: [{ required: true, message: '请选择订单来源', trigger: 'change' }],
    // 已付金额 自定义验证
    actualPrice: [
      { required: true, message: '请输入已付金额', trigger: 'change' },
      {
        validator: actualPriceRules,
        trigger: 'change'
      }
    ],
    logisticsPlatformCode: [{ required: true, message: '请选择物流公司', trigger: 'change' }],
    totalAmount: [{ required: true, message: '请输入总金额', trigger: 'change' }]
  };

  // shippingType = '2' 的时候  单号和物流必填
  if (shippingType === '2') {
    rules.logisticsPlatformName = [
      { required: true, message: '请填写自主补单物流', trigger: ['blur'] }
    ];
    rules.logisticsNo = [{ required: true, message: '请填写自主补单物流单号', trigger: ['blur'] }];
  }

  return rules;
};

// 校验规则
// 付款信息必填
const rules = computed(() => getFormRules(form.shippingType));
const emits = defineEmits(['ok']);

// 包裹信息
const initPkgItem = () => ({
  id: Date.now(),
  expanded: true,
  productCollection: cloneDeep(toRaw(props.goodsList)),
  actualPrice: 0,
  codAmount: 0,
  totalAmount: 0
});

const isCollapsed = ref(false);

const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};

// 初始化表单数据
const initField = () => ({
  orderId: null,
  // 客户信息
  recognizeText: '',
  receiverName: '',
  receiverPhone: '',
  receiverAddress: '',
  // 订单信息
  paymentMethod: '',
  isBigOrder: 0,
  actualPrice: 0,
  codAmount: 0,
  totalAmount: 0,
  orderRemark: '',
  channelType: '',
  fileAttachment: '',
  // 物流类型
  shippingType: '1',
  orderTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  isDelayedDelivery: 0,
  logisticsPlatformCode: '',
  expressNo: '',
  packages: [initPkgItem()] as any
});

// 表单数据
const form = reactive<any>({});

watch(
  () => props.goodsList,
  () => {
    // 初始化表单数据
    const newField = initField();
    // 初始化商品列表
    Object.assign(form, newField);
  },
  {
    immediate: true
  }
);

// 添加新的包裹
const addPackage = async () => {
  form.packages.push(initPkgItem());
};

// 根据产品类型
const getGoodsTypeByUsageType = (row: any) => {
  const type = row.usageType;
  const findx: any = props.goodsTypes.filter((item: any) => item.value == type);
  if (findx.length > 0) {
    return findx[0].label;
  }
  return '';
};

// 从套餐选择
function selectPackage(index: any) {
  selectGoodsPackageRef.value.show(index);
}

// 固定套餐商品关闭
const fixedClose = (index: any) => {
  form.packages[index].isFixed = 0;
  const list = cloneDeep(props.goodsList);
  list.forEach((v) => {
    v.num = 0;
  });
  // 初始化套餐列表
  form.packages[index].productCollection = list;
};

// 选择商品释放
const packageData = ref<any>([]);
function selectGoodsPackage(goods: any, index: any) {
  packageData.value[index] = goods;
  goods.productCollection.forEach((item: any) => {
    item.productPrice = item.salePrice; // 这里一定要用销售价
  });
  // 同步数量和价格到商品列表
  form.packages[index].isFixed = goods.isFixed;
  form.packages[index].productCollection = goods.productCollection;
}
// 删除包裹
const removePackage = (index: number) => {
  form.packages.splice(index, 1);
};

// 获取商品名称 和 数量
const getProduct = (pkg: any) => {
  let productName = '';
  let productNum = 0;
  let price = 0;
  pkg.forEach((item: any) => {
    productName +=
      item.productName + ' - ' + getGoodsTypeByUsageType(item) + ' x ' + item.num + '，';
    productNum += item.num;
    price += item.num * item.productPrice;
  });
  return productName + '共' + productNum + '件，金额' + price + '元';
};

// 计算包裹药品数量
const calcPkgQty = (pkg: any) =>
  pkg.productCollection.reduce((sum: number, p: any) => sum + (p.num || 0), 0);

// 计算包裹金额
const calcPkgAmount = (pkg: any) => {
  const taotalAmount = pkg.productCollection.reduce(
    (sum: number, p: any) => sum + (p.num || 0) * (p.productPrice || 0),
    0
  );
  pkg.totalAmount = taotalAmount;
  return taotalAmount;
};

// 检测到子包裹productCollection得数量发生变化 计算外层总金额 totalAmount
watch(
  () => form.packages,
  (newVal) => {
    form.totalAmount = newVal.reduce((sum: number, p: any, index: number) => {
      let totalSum = 0;
      // 如果是套餐，判断是否是固定套餐
      const hasTc: any = packageData.value[index];
      if (hasTc && hasTc.isFixed) {
        totalSum = sum + hasTc.salePrice;
      } else {
        totalSum = sum + calcPkgAmount(p);
      }
      return totalSum;
    }, 0);
  },
  {
    deep: true
  }
);
// 已付金额发生改变，判断：1. 已付金额不能大于总金额 2.已付金额+代付金额 不能超总金额
// 如果大于总金额，那么值等于 总金额 - 代付金额
// 超过后提醒
const actualPriceChange = () => {
  if (form.actualPrice > form.totalAmount) {
    form.actualPrice = form.totalAmount;
  }
  if (form.actualPrice + form.codAmount > form.totalAmount) {
    form.actualPrice = form.totalAmount - form.codAmount;
    ElMessage.warning('已付金额 ≤ 总金额，且（已付 + 代付）≤ 总金额');
  }
};

// 代付金额发生改变，判断：1. 代付金额不能大于总金额 2.已付金额+代付金额 不能超总金额
const codAmountChange = () => {
  if (form.codAmount > form.totalAmount) {
    form.codAmount = form.totalAmount;
  }
  if (form.actualPrice + form.codAmount > form.totalAmount) {
    form.codAmount = form.totalAmount - form.actualPrice;
    ElMessage.warning('已付金额 ≤ 总金额，且（已付 + 代付）≤ 总金额');
  }
};

// 选择客户
function selectCustomer(row: any) {
  form.customerId = row.customerId;
  form.receiverName = row.customerName;
  form.receiverPhone = row.customerPhone;
  form.receiverAddress = row.contactAddress;
}

// 提交
// 校验表单必填项，校验每一个包裹的商品num和 必须 > 1
const submit = () => {
  formRef.value.validate().then((valid: boolean) => {
    // 校验多包裹订单的数量，必须>1
    if (valid) {
      // 如果是收起状态 判断客户是否有填写信息
      // !isCollapsed
      if (
        !isCollapsed.value &&
        (!form.receiverName || !form.receiverPhone || !form.receiverAddress)
      ) {
        ElMessage.warning('请填写完整的客户信息');
        return;
      }

      if (form.packages.length < 2) {
        ElMessage.warning('请至少添加两个子订单');
        return;
      }
      // 校验包裹商品数量，使用可中断的循环（for...of）
      for (const pkg of form.packages) {
        if (calcPkgQty(pkg) == 0) {
          ElMessage.warning('包裹商品数量必须大于1');
          return;
        }
      }

      const groupProductIds: string[] = [];

      // 移除num=0的商品 并且记录商品id
      form.packages.forEach((pkg: any) => {
        pkg.productCollection = pkg.productCollection.filter((item: any) => {
          if (item.num > 0) {
            groupProductIds.push(item.productId);
            return true;
          }
          return false;
        });
      });

      // 把id数组逗号分隔
      form.groupProductIds = groupProductIds.join(',');
      // 传递给二次确认框
      confirmMultiPackageDialogRef.value?.show(cloneDeep(form));
    }
  });
};

// 二次确认的
const loadings = ref(false);
const handleConfirmSubmit = () => {
  loadings.value = true;
  const loading = ElLoading.service({
    lock: true,
    text: '多包裹订单创建中...',
    background: 'rgba(255, 255, 255, 0.7)'
  });

  // 将客户信息添加到包裹中
  form.packages.forEach((pkg: any) => {
    pkg.customerId = form.customerId;
    pkg.receiverName = form.receiverName;
    pkg.receiverPhone = form.receiverPhone;
    pkg.receiverAddress = form.receiverAddress;
    pkg.paymentMethod = form.paymentMethod;
  });

  addRepeatPurchaseOrders(form)
    .then((res: any) => {
      loadings.value = false;
      loading.close();
      if (res.code == 200) {
        ElMessage.success('操作成功');
        emits('ok');
        close();
      }
    })
    .catch(() => {
      loading.close();
      loadings.value = false;
    });
};

const close = () => {
  visible.value = false;
  // 初始化表单数据
  formRef.value.resetFields();
  const newField = initField();
  // 初始化商品列表
  Object.assign(form, newField);
  form.packages = [initPkgItem()];
  packageData.value = [];
};

const title = computed(() => {
  return form.orderId ? '编辑多包裹订单' : '新增多包裹订单';
});

const show = (type: any, data: any) => {
  if (type == 'edit') {
    Object.assign(form, data);
  }
  visible.value = true;
};
defineExpose({ show });
</script>
<style scoped lang="scss">
.order-form {
  .section-title {
    border: 1px solid #ebebeb;
    padding: 40px 20px 20px 20px;
    box-sizing: border-box;
    border-radius: 4px;
    position: relative;
    margin-bottom: 10px;

    .label {
      position: absolute;
      display: inline-block;
      padding: 5px 10px;
      background: #ebebeb;
      font-size: 13px;
      margin-bottom: 10px;
      border-radius: 0 4px 4px 0;
      left: 0;
      top: 0;
    }

    .collapse-btn {
      padding: 0;
      left: auto;
      right: 0;
      border: 1px solid #ebebeb;
    }
  }

  :deep {
    .el-form-item--default {
      margin-bottom: 18px;
    }

    .el-card__header {
      padding-top: 7px !important;
    }

    .el-card__body {
      padding-bottom: 10px !important;
    }
  }

  .package-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;

    .package-title {
      font-size: 16px;
      color: #409eff;
      display: flex;
      align-items: center;
    }

    .actions {
      display: flex;
    }
  }

  .recognize-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
    position: relative;

    // .ocr-input {}

    .ocr-btn {
      position: absolute;
      bottom: 8px;
      right: 16px;
    }
  }

  .product-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .product-title {
    font-weight: 600;
    font-size: 16px;
    color: #333;
    margin-right: 50px;
  }

  .total-bar {
    text-align: right;
    margin-top: 10px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    padding-top: 8px;

    .amount {
      color: #f56c6c;
      font-weight: 700;
    }

    .oldSalePrice {
      text-decoration: line-through;
    }

    .salePrice {
      margin-left: 10px;
    }
  }

  .pkg-preview {
    font-size: 14px;
  }

  .add-package-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 16px 0;
    padding: 6px 12px;
    border: 1px dashed #409eff;
    color: #409eff;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background: #ecf5ff;
    }
  }
}
</style>
